<template>
  <view class="special-topic-item">
    <navigator
      :url="`/pages/classlist/classlist?id=${item._id}&name=${item.name}`"
      class="nav-item"
      v-if="!isMore">
      <image class="pic" :src="item.picurl" mode="aspectFill"> </image>
      <view class="classify">{{ item.name }}</view>
      <view class="date">
        <uni-dateformat
          :date="item.updateTime"
          format="yyyy/MM/dd"
          :threshold="[60 * 1000, 604800 * 1000]"></uni-dateformat>
      </view>
    </navigator>

    <navigator
      url="/pages/classify/classify"
      open-type="reLaunch"
      class="nav-item more"
      v-else>
      <image
        class="pic"
        src="../../common/images/recommand/more.jpg"
        mode="aspectFill">
      </image>
      <view class="classify">
        <uni-icons type="more-filled" size="24" color="#fff"></uni-icons>
        <view class="text">更多</view>
      </view>
    </navigator>
  </view>
</template>

<script setup>
defineProps({
  item: {
    type: Object,
    default: () => ({
      picurl: '../../common/images/recommand/classify1.jpg',
      name: '默认名称',
      updateTime: new Date() - 1000 * Math.floor(Math.random() * 10),
    }),
  },
  isMore: {
    type: Boolean,
    default: false,
  },
})
</script>

<style lang="scss" scoped>
.special-topic-item {
  .nav-item {
    position: relative;
    overflow: hidden;
    height: 400rpx;
    border-radius: 10rpx;

    .pic {
      width: 100%;
      height: inherit;
    }

    .classify {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 60rpx;

      display: flex;
      align-items: center;
      justify-content: center;

      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(5rpx);
      font-size: 30rpx;
      font-weight: 600;
      color: #fff;
    }

    .date {
      position: absolute;
      top: 0;
      left: 0;

      background-color: $primary-theme-color;
      color: #fff;
      border-bottom-right-radius: 10rpx;
      font-size: 22rpx;
      padding: 6rpx 10rpx;
      transform: scale(0.8);
      transform-origin: left top;
    }
  }

  .nav-item.more {
    .classify {
      width: 100%;
      height: 100%;
      backdrop-filter: blur(25rpx);
      flex-direction: column;
    }

    .text {
      padding: 10rpx;
    }
  }
}
</style>
